import React, { useState } from "react";
import { Breadcrumb, Button, Form, Input, Image, message } from "antd";
import axios from "axios";
import { useNavigate } from "react-router-dom";

const Index = () => {
  const navigate = useNavigate();
  const [messageApi, contextHolder] = message.useMessage();
  const [url, setUrl] = useState("");

  const onFinish = (values) => {
    console.log("Success:", { ...values, img: url });

    if (url) {
      axios
        .post(
          "http://121.89.205.189:3000/admin/banner/add",
          {
            ...values,
            img: url,
          },
          {
            headers: {
              "Content-Type": "application/json",
              token: localStorage.getItem("token"),
            },
          }
        )
        .then((res) => {
          if (res.data.code === "200") {
            navigate("/home/bannerlist");
          } else {
            messageApi.open({
              type: "error",
              content: res.data.message,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    } else {
      messageApi.open({
        type: "warning",
        content: "请先上传图片",
      });
    }
  };

  const fn = (e) => {
    // 当上传框的图片更改的时候调用
    // 将图片转成base64格式(用字符串表示图片)
    // 代码不用记
    // console.log(e.target.files[0]);
    const reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onload = (event) => {
      // console.log(event.target.result);
      setUrl(event.target.result);
    };
  };

  return (
    <div>
      {contextHolder}
      <Breadcrumb
        style={{ marginBottom: 20 }}
        items={[
          {
            title: "轮播图管理",
          },
          {
            title: "添加轮播图",
          },
        ]}
      />

      <Form
        name="basic"
        onFinish={onFinish}
        autoComplete="off"
        style={{ maxWidth: 600 }}
        labelCol={{
          span: 6,
        }}
        wrapperCol={{
          span: 18,
        }}
      >
        <Form.Item
          label="链接链接"
          name="link"
          rules={[
            {
              required: true,
              message: "Please input your link!",
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="提示"
          name="alt"
          rules={[
            {
              required: true,
              message: "Please input your alt!",
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item label="图片">
          <Input type="file" onChange={fn} />
        </Form.Item>

        {url && (
          <Form.Item
            wrapperCol={{
              offset: 6,
              span: 18,
            }}
          >
            <Image src={url} width={200}></Image>
          </Form.Item>
        )}

        <Form.Item
          wrapperCol={{
            offset: 6,
            span: 18,
          }}
        >
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default Index;
